<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .progress-bar-container {
            width: 100%;
            background-color: #f3f3f3;
            border-radius: 15px;
            overflow: hidden;
            height: 15px; /* 进度条的高度 */
            position: relative;
        }

        .progress-bar {
            height: 100%;
            width: 0%;
            background-image: linear-gradient(to right, rgb(0, 195, 255) 0%, rgb(0, 165, 255) 100%);
            transition: width 0.5s ease;
            position: absolute;
            right: 0;
            top: 0;
        }

        .progress-bar-left {
            height: 100%;
            width: 0%;
            background-image: linear-gradient(to right, rgb(0, 195, 255) 0%, rgb(0, 165, 255) 100%);
            transition: width 0.5s ease;
            position: absolute;
            left: 0;
            top: 0;
        }

        .percentage {
            position: absolute;
            top: 50%;
            left: 5px; /* 将数字放置在进度条的最左边 */
            transform: translateY(-50%); /* 垂直居中 */
            font-size: 12px;
            color: black;
            z-index: 2; /* 确保百分比文本在进度条上方显示 */
        }

        .percentage-left {
            position: absolute;
            top: 50%;
            right: 5px; /* 将数字放置在进度条的最右边 */
            transform: translateY(-50%); /* 垂直居中 */
            font-size: 12px;
            color: black;
            z-index: 2; /* 确保百分比文本在进度条上方显示 */
        }
    </style>
</head>
<body>
<table>
    <colgroup>
        <col style="width: 120px;">
        <col style="width: 120px;">
        <col style="width: 120px;">
    </colgroup>
    <thead class="zt2-table__thead">
    <tr>
        <th class="zt2-table">
            <div class="zt2-table__head">执法队员数量</div>
        </th>
        <th class="zt2-table">
            <div class="zt2-table__head"></div>
        </th>
        <th class="zt2-table">
            <div class="zt2-table__head">案卷上报数量</div>
        </th>
    </tr>
    </thead>
    <tbody class="zt2-table__tbody">
    <tr>
        <td class="zt2-table">
            <div class="progress-bar-container">
                <div class="progress-bar" id="progress-bar-right" style="width: 85%"></div>
                <span class="percentage" id="percentage-right">85%</span>
            </div>
        </td>
        <td class="zt2-table" style="color: rgb(45, 75, 115);"><span
                style="font-size: 14px; font-weight: normal; line-height: 24px;">其他便民服务类</span></td>
        <td class="zt2-table">
            <div class="progress-bar-container">
                <div class="progress-bar-left" id="progress-bar-left" style="width: 85%"></div>
                <span class="percentage-left" id="percentage-left">85%</span>
            </div>
        </td>
    </tr>
    <!-- 你可以根据需要在这里继续添加其他行 -->
    </tbody>
</table>

<script>
    // 动态更新进度条和百分比
    function updateProgressBar(percentage, direction) {
        if (direction === 'right') {
            const progressBar = document.getElementById('progress-bar-right');
            const percentageText = document.getElementById('percentage-right');
            progressBar.style.width = percentage + '%';
            percentageText.textContent = percentage + '%';
        } else if (direction === 'left') {
            const progressBar = document.getElementById('progress-bar-left');
            const percentageText = document.getElementById('percentage-left');
            progressBar.style.width = percentage + '%';
            percentageText.textContent = percentage + '%';
        }
    }

    // 这里更新进度条，假设进度值为 85%
    updateProgressBar(85, 'right');
    updateProgressBar(85, 'left');
</script>
</body>
</html>
